<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>用户更新</title>
</head>

<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <!--侧边栏-->
    <div th:replace="_fragment :: menu(2,2.1)"></div>

    <div class="main-content" >
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a th:href="@{/admin/toIndex}">首页</a>
                </li>

                <li>
                    <a th:href="@{/admin/toUser}">用户</a>
                </li>
                <li class="active">更新</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content" >

            <div class="page-content-area">

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue">用户信息</h3>
                        <div class="table-header lighter">
                            》
                        </div>

                        <!--表单-->
                        <form class="form-horizontal" id="validation-form" th:method="post" th:action="@{/admin/updateUser}" enctype="multipart/form-data">
                            <input type="text" th:value="${myUser.id}" name="id" hidden />
                            <table class="mdui-table">
                                <thead>
                                <tr>
                                    <th>输入以下用户信息</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="text-align: right">用户姓名:</td>
                                    <td>
                                        <input type="text" th:value="${myUser.userName}" name="userName" id="userName"
                                               class="col-xs-12 col-sm-6" onblur="isUserName()"/>
                                        <span id="errorMsg-userName" style="height: 33px; line-height: 33px; margin-left: 5px; color: #ff0000;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">账号:</td>
                                    <td>
                                        <input type="text" th:value="${myUser.loginUser}" name="loginUser" id="loginUser"
                                               class="col-xs-12 col-sm-6" onblur="isLoginUser()"/>
                                        <span id="errorMsg-loginUser" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td style="text-align: right">密码:</td>
                                    <td>
                                        <input type="password" th:value="${myUser.password}" name="password" id="password"
                                               class="col-xs-12 col-sm-6" onblur="isPassword()"/>
                                        <span id="errorMsg-password" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">确认密码:</td>
                                    <td>
                                        <input type="password" th:value="${myUser.password}" name="password2" id="password2"
                                               class="col-xs-12 col-sm-6" onblur="isPassword2()" />
                                        <span id="errorMsg-password2" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">电话:</td>
                                    <td>
                                        <input type="text" th:value="${myUser.phone}" name="phone" id="phone"
                                               class="col-xs-12 col-sm-6" onblur="isPhone()"/>
                                        <span id="errorMsg-phone" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">地址:</td>
                                    <td>
                                        <input type="text" th:value="${myUser.address}" name="address" id="address"
                                               class="col-xs-12 col-sm-6" onblur="isAddress()"/>
                                        <span id="errorMsg-address" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">头像:</td>
                                    <td>
                                        <label class="ace-file-input col-xs-12 col-sm-6">
                                                            <span id="removeInput">
                                                                <input type="file" name="file" id="id-input-file-2" onchange="add()">
                                                            </span>
                                            <span class="ace-file-container" id="ace-file-container" data-title="Choose">
                                                                <span class="ace-file-name" id="ace-file-name" data-title="请选择图片">
                                                                    <i class=" ace-icon fa fa-upload"></i>
                                                                </span>
                                                             </span>
                                            <a class="remove" href="javascript:void(0);" id="remove" onclick="remove()">
                                                <i class=" ace-icon fa fa-times"></i></a>
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">邮箱:</td>
                                    <td>
                                        <input type="email" th:value="${myUser.email}" name="email" id="email"
                                               class="col-xs-12 col-sm-6" onblur="isEmail()" />
                                        <span id="errorMsg-email" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
<!--                                <tr>-->
<!--                                    <td style="text-align: right">状态:</td>-->
<!--                                    <td>-->
<!--                                        <select id="status" name="status" class="select2"-->
<!--                                                data-placeholder="Click to Choose..." >-->
<!--                                            <option value="1" th:selected="${myUser.status == 1}">开启</option>-->
<!--                                            <option value="2" th:selected="${myUser.status == 0}">关闭</option>-->
<!--                                        </select>-->
<!--                                    </td>-->
<!--                                </tr>-->
                                    <input id="status" name="status" th:value="${myUser.status}" hidden/>
                                </tbody>
                            </table>

                            <div style="margin-top: 20px;"></div>

                            <div class="col-xs-4"></div>
                            <div class="">
                                <button class="btn btn-info" type="button" onclick="subForm()">
                                    <i class="ace-icon fa fa-check bigger-110"></i>
                                    提交
                                </button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button class="btn" type="reset">
                                    重置
                                    <i class="ace-icon fa fa-undo bigger-110"></i>
                                </button>
                            </div>

                        </form>

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->

    <div th:replace="_fragment::footer"></div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->


<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    //添加图片
    function add(){
        var str = $("#id-input-file-2").val();
        var arr=str.split('\\');//注split可以用字符或字符串分割
        var my=arr[arr.length-1];//这就是要取得的图片名称

        $("#ace-file-container").attr("data-title","Change");
        $("#ace-file-name").attr("data-title",my);
        $("#ace-file-container").addClass("selected");
        //isFile();
    }

    //清空input的file
    function remove() {
        $("#removeInput").html('<input type="file" id="id-input-file-2" onchange="add()">');
        $("#ace-file-container").attr("data-title","Choose");
        $("#ace-file-name").attr("data-title","请选择图片");
        $("#ace-file-container").removeClass("selected");
        //isFile();
    }

    function isLoginUser() {
        var loginUser = $("#loginUser").val();
        if(loginUser == null || loginUser == ""){
            $("#errorMsg-loginUser").html("不能为空");
            return false;
        }else{
            $("#errorMsg-lgoinUser").html("");
            return true;
        }
    }

    function isUserName() {
        var userName = $("#userName").val();
        if(userName == null || userName == ""){
            $("#errorMsg-userName").html("不能为空");
            return false;
        }else{
            $("#errorMsg-userName").html("");
            return true;
        }
    }

    function isPassword() {
        var password = $("#password").val();
        if(password == null || password == ""){
            $("#errorMsg-password").html("不能为空");
            return false;
        }else{
            $("#errorMsg-password").html("");
            return true;
        }
    }

    function isPassword2() {
        var p1 = $("#password").val();
        var p2 = $("#password2").val();
        if(p2 == null || p2 == ""){
            $("#errorMsg-password2").html("不能为空");
            return false;
        }else{
            if(p1 != p2){
                $("#errorMsg-password2").html("两次输入的密码不同");
                return false;
            }else{
                $("#errorMsg-password2").html("");
                return true;
            }
        }
    }


    function isPhone() {
        var phone = $("#phone").val();
        if(phone == null || phone == ""){
            $("#errorMsg-phone").html("不能为空");
            return false;
        }else{
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                $("#errorMsg-phone").html("手机号码格式错误");
                return false;
            }else{
                $("#errorMsg-phone").html("");
                return true;
            }
        }
    }


    function isAddress() {
        var address = $("#address").val();
        if(address == null || address == ""){
            $("#errorMsg-address").html("不能为空");
            return false;
        }else{
            $("#errorMsg-address").html("");
            return true;
        }
    }

    function isFile() {
        var file = $("#id-input-file-2").val();
        if(file == null || file == ""){
            $("#errorMsg-file").html("不能为空");
            return false;
        }else{
            $("#errorMsg-file").html("");
            return true;
        }
    }



    function isEmail() {
        var email = $("#email").val();
        var reg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        if(email == null || email == ""){
            $("#errorMsg-email").html("不能为空");
            return false;
        }else{
            if(!reg.test(email)){
                $("#errorMsg-email").html("邮箱格式错误");
                return false;
            }else{
                $("#errorMsg-email").html("");
                return true;
            }
        }
    }

    function subForm() {
        var isTrue = isUserName() && isPassword() && isPassword2() && isPhone() && isAddress()  && isEmail();
        if(isTrue){
            $("#validation-form").submit();
        }
    }



</script>
</body>
</html>
